// 引入路由api
import {createRouter, createWebHashHistory} from 'vue-router'



// 引入页面
const Home = () => import('../views/Home.vue')
const About = () => import('../views/About.vue')
const UserCenter = () => import('../views/user-center/Index.vue')
const UserProfile = () => import('../views/user-center/Profile.vue')
const UserSettings = () => import('../views/user-center/Settings.vue')

// 引入ElementTest 页
const ElementTest = ()=> import("../views/ElementTest.vue")
const ListDemo = ()=> import("../views/ListDemo.vue")
// 引入AccountList 页
const AccountList = ()=> import("../views/AccountList.vue")

// 引入注册页
const Register = ()=> import("../views/Register.vue")



// 引入 Vuex页
const VuexPage = () => import('../views/Vuex.vue')
// 404 页
const NotFound = () => import('../views/404.vue')

// 路由配置
const routeConfig = [
    {path:'/', redirect:'/home'},
    {path:'/home', name:'home', component: Home},
    {path:'/about', name:'about',  component: About},
    // 用户中心
    {
        path:'/user',
        name:'userCenter',
        component: UserCenter,
        redirect:'/user/profile',
        children:[
            {
                path:'profile',
                name:'profile',
                component: UserProfile
            },
            {
                path:'settings',
                name:'settings',
                component: UserSettings
            },
        ]
    },
    {path:'/vuex', name:'vuex',  component: VuexPage},
    {path:'/element',name:'element', component: ElementTest},
    {path:'/list-demo',name:'listDemo', component: ListDemo},
    {path:'/register',name:'register', component: Register},
    {path:'/account-list',name:'accountList', component: AccountList},
    // 404
    {
        path:'/:pathMatch(.*)*',
        name:'NotFound',
        component:NotFound
    }
]

// 创建路由实例
const router = createRouter({
    // 使用 hash模式
    history: createWebHashHistory(),
    // 传入路由的配置
    routes: routeConfig
})

router.beforeEach((to,from)=>{
    console.log('前置');
    console.log('to',to);
    console.log('from',from);
})

router.afterEach((to,from)=>{
    console.log('后置');
    console.log('to',to);
    console.log('from',from);
})


export default router